<template>
	<div class="sign" >
		<div id="allmap" :style="'height:'+height+'px;width:100%'"></div>
		<div class="__box" >
			<div style="padding:10px">
				<p style="text-align:left;">日期: {{(new Date()).toLocaleDateString()}} <van-tag type="success" size="mini">{{get_day(new Date())}}</van-tag><br/> 打卡时段 {{sign.sign_time}} <a v-if="rule_times.length" href="javascript:;;" @click="show = true"><!--<van-tag size="mini">点击修改</van-tag>--></a></p>
				<van-row :gutter="20">
					<van-col :span="12"><van-button type="primary" style="width:100%" @click="sign_in(1)">签到</van-button></van-col>
					<van-col :span="12"><van-button type="primary" style="width:100%" @click="sign_in(2)" plain>签退</van-button></van-col>
				</van-row>
			</div>
		</div>
    <!--返回按钮-->
    <!--返回按钮-->
    <button class="back-btn" @click="backFn" id="moveDiv" @mousedown="down" @touchstart="down"
            @mousemove="move" @touchmove="move"
            @mouseup="end" @touchend="end">
      <i class="iconfont icon-icon_reply" style="display: block"></i>
      返回
    </button>
		<!-- <actionsheet v-model="show" :menus="rule_times" :show-cancel="true" @on-click-menu="change_times"></actionsheet> -->
	</div>
</template>

<script>
// import { Actionsheet } from 'vux'
import backs from "@/components/menu/backPrev";
export default {
  components:{
    backs
  },
	data() {
		return {
			show : false,
			user_rule : [],
			rule_times : [],
			sign : {
				employee_id : 0,
				sign_time : "",
				sign_type : "",
				sign_offset : 0
			},
			height : window.innerHeight,
			map : null,
			point : null,
			marker : null,
      // 返回按钮、

      flags: false,
      position: {
        x: 0,
        y: 0
      },
      nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
      clientHeight:0,
      clientWidth:0
		};
    },
    methods: {
    	get_day(data){
			var day = data.getDay();
			switch(day){
				case 1:
					return '周一';
					break;
				case 2:
					return '周二';
					break;
				case 3:
					return '周三';
					break;
				case 4:
					return '周四';
					break;
				case 5:
					return '周五';
					break;
				case 6:
					return '周六';
					break;
				default:
					return '周日';
			}
    	},
    	creatmap(point){
			var _this = this;
    		var pois = this.user_rule.rule_pois
    		this.map = new BMap.Map("allmap");
			this.point = new BMap.Point(pois.lng,pois.lat);
			this.marker = new BMap.Marker(this.point);
			this.map.addOverlay(this.marker);
			this.map.enableScrollWheelZoom(true);
			this.map.centerAndZoom(this.point,14);
			let GeolocationControl = new BMap.GeolocationControl({
				showAddressBar : true,
				enableAutoLocation : true,
				anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
				offset : {
					width : 10,
					height: 125
				}
			})
			GeolocationControl.addEventListener('locationSuccess',r => {
				let pointa = new BMap.Point(r.point.lng,r.point.lat);
				var polyline = new BMap.Polyline([this.point,pointa], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //定义折线
				this.map.addOverlay(polyline);
				this.map.panTo(pointa);
				this.sign.sign_offset = this.map.getDistance(this.point,pointa).toFixed(2);
			});
			GeolocationControl.location();
			this.map.addControl(GeolocationControl);
			// var geolocation = new BMap.Geolocation();
			// geolocation.getCurrentPosition(function(r){
			// 	if(this.getStatus() == BMAP_STATUS_SUCCESS){
			// 		// var mk = new BMap.Marker(r.point);
			// 		// map.addOverlay(mk);
			// 		// map.panTo(r.point);
			// 		let pointa = new BMap.Point(r.point.lng,r.point.lat);
			// 		_this.map.panTo(pointa);
			// 		var polyline = new BMap.Polyline([_this.point,pointa], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //定义折线
			// 		_this.map.addOverlay(polyline);
			// 		_this.sign.sign_offset = _this.map.getDistance(_this.point,pointa).toFixed(2);
			// 		// alert('您的位置：'+r.point.lng+','+r.point.lat+','+_this.sign.sign_offset+'米');
			// 	}
			// 	else {
			// 		alert('failed'+this.getStatus());
			// 	}
			// },{enableHighAccuracy: true})
    	},
    	get_user_rule(id,callback){
    		this.$http.setting.get('employeeRule/rule/'+id).then(res => {
    			if(res.data.code){
    			  // console.log(res.data.message)
					// this.$toast.success(res.data.message);
					this.$toast.fail('该员工未关联考勤');
				}else{
					this.user_rule = res.data.data;

					this.rule_times = []
					this.user_rule.rule_set[0].rule_times.forEach((value,key) => {
						this.rule_times.push(value[0]+' - '+value[1]);
					})
					this.sign.sign_time = this.rule_times[0];
					callback();
				}
			},err => {
				this.$toast.fail('获取规则错误:'+err.data.message);
			})
    	},
    	change_times(key,time){
    		this.sign.sign_time = time;
    	},
    	sign_in(sign_type){
    		this.sign.sign_type = sign_type;
			this.$toast.loading({
				mask: true,
				message: '加载中...'
			})

    		this.$http.setting.post('attend',this.sign).then(res => {
    		  console.log(res)
    			if(res.data.code){
					this.$toast.fail(res.data.message);
				}else{
					this.$toast.success('打卡成功');
				}
			},err => {
				this.$toast.fail('系统错误:'+err.data.message);
			})
    	},
      // 一下是返回按钮
      backFn(){
        this.$router.go(-1);
      },
      // 实现移动端拖拽
      down(){
        this.flags = true;
        var touch ;
        if(event.touches){
          touch = event.touches[0];
        }else {
          touch = event;
        }
        this.position.x = touch.clientX;
        this.position.y = touch.clientY;
        this.dx = moveDiv.offsetLeft;
        this.dy = moveDiv.offsetTop;
      },
      move(){
        if(this.flags){
          var touch ;
          if(event.touches){
            touch = event.touches[0];
          }else {
            touch = event;
          }
          this.nx = touch.clientX - this.position.x;
          this.ny = touch.clientY - this.position.y;
          this.xPum = this.dx+this.nx;
          this.yPum = this.dy+this.ny;

          if(this.xPum<0){
            this.xPum=0
          }
          if(this.xPum>(this.clientWidth-50)){
            this.xPum=this.clientWidth-50
          }
          if(this.yPum<0){
            this.yPum=0
          }
          if(this.yPum >(this.clientHeight-50)){
            this.yPum=this.clientHeight-50
          }

          moveDiv.style.left = this.xPum+"px";
          moveDiv.style.top = this.yPum +"px";
          //阻止页面的滑动默认事件
          document.addEventListener("touchmove",function(){
            event.preventDefault();
          },false);
        }
      },
      //鼠标释放时候的函数
      end(){
        this.flags = false;
      }
    },
    watch : {

    },
    created (){

    },
    mounted (){
      this.clientHeight =   `${document.documentElement.clientHeight}`;
      this.clientWidth =   `${document.documentElement.clientWidth}`;
	    // alert(window.innerHeight)
      var empid = localStorage.getItem("empId");
      // emp = JSON.parse(emp)
      this.sign.employee_id = empid
    	this.get_user_rule(empid,() => {
    		this.creatmap();
	    	// navigator.geolocation.getCurrentPosition(position => {
		    //    	//得到html5定位结果
		    //     var x = position.coords.longitude;
			//     var y = position.coords.latitude;
			// 	alert(x)

			// 	// var ggPoint = new BMap.Point(x,y);
			// 	// var point1 = new BMap.Point(this.user_rule.rule_pois.lat,this.user_rule.rule_pois.lng)
			//     // //由于html5定位的结果是国际标准gps，所以from=1，to=5
		 	//     // //下面的代码并非实际是这样，这里只是提供一个思路
		 	//     // var convertor = new BMap.Convertor();
		    //     // var pointArr = [];
		    //     // pointArr.push(ggPoint);
			// 	// alert(x+y)
		    //     // convertor.translate(pointArr, 1, 5,data => {
			// 	// 	if(data.status === 0) {
			// 	// 		var marker = new BMap.Marker(data.points[0]);
			// 	// 		this.map.addOverlay(marker);
			// 	// 		this.map.setCenter(data.points[0]);
			// 	// 		this.map.centerAndZoom(data.points[0],17);
			// 	// 		this.sign.sign_offset = this.map.getDistance(ggPoint,point1).toFixed(2)
			// 	// 		alert(this.sign.sign_offset+'米')
			// 	// 	}
			//     // })

			// },function(){},{
			// 	enableHighAccuracy: true,// 是否使用高精度设备如GPS。默认是true
			// 	timeout: 5000,  		 // 超时时间单位毫秒,默认为0
			// 	maximumAge: 0  			 // 默认为0即始终请求新数据,Infinity则始终使用缓存数据
			// })
    	})
    }
}
</script>

<style scoped >
	body{overflow: hidden; height:100%;}
	.sign{ position: relative;}
	.select{ position: absolute; left: 25%; top: 10px; width: 50%;}
	.__box{ position: absolute; font-size: 14px; padding:0;margin:0; overflow: hidden; width: 100%; bottom: 0; left: 0; text-align: center;background: rgba(250,250,250,.9)}
	.__box p{line-height: 24px;}
  .back-btn{
    position: fixed;
    bottom:200px;
    right:10px;
    background:rgba(0,0,0,.5);
    width:50px;
    height:47px;
    /*height:auto!important;*/
    color:#fff;
    font-size:12px;
    padding:7px 0;
    border-radius: 5px;
    line-height: initial;
    border:0;
  }
  .back-btn .iconfont{
    font-size:12px;
  }
</style>
